<template>
  <!--上传新项目弹框 -->
  <m-modal
    v-model="visible"
    :width="736"
    class="v-publish-new-project"
    mask
    title="上传新项目"
    :showFooter="true"
    :cancelText="cancelText"
    :centerBtnText="centerBtnText"
    :okText="okText"
    :okLoading="loading"
    @cancel="handleCancel"
    @click-center="handleClickCenter"
    @ok="handleOk"
  >
    <div class="_content g-pd-tb-40 g-pd-lr-95">
      <a-form-model
        ref="form"
        :model="formData"
        :rules="rules"
      >
        <a-form-model-item label="项目名称" prop="name">
          <a-input
            v-model="formData.name"
            placeholder="当前项目名称"
            :disabled="loading"
          >
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="上传路径" prop="name">
          <div class="upload-path">{{uploadPath}}</div>
          <div class="g-pd-tb-11 g-pd-lr-18 group-tree" :class="{_disabled:loading}">
            <project-group-tree
              :treeData="treeData"
              @select="handleTreeSelect"
            ></project-group-tree>
          </div>
        </a-form-model-item>
        <a-form-model-item label="项目描述" prop="desc">
          <a-input
            v-model="formData.desc"
            type="textarea"
            placeholder="项目描述"
            oninput="if(value.length>200)value=value.slice(0,200)"
            :disabled="loading"
          >
          </a-input>
        </a-form-model-item>
      </a-form-model>
    </div>
  </m-modal>
</template>
<script>
import customModal from '../common/CustomModal';
import { Portal } from 'src/components/common/Portal.vue';
import { SysMLUtilHelper } from 'src/api/sysml-imports';
import { API } from '@/constants/api';
import projectGroupTree from './projectGroupTree';
import { treeForEach } from "@/util/common";

const com = {
  name: 'publishRemoteProject',
  components: {
    'm-modal': customModal,
    "project-group-tree": projectGroupTree
  },
  data() {
    return {
      visible: false,
      rules: {
        name: [
          { required: true, message: '此项不能为空', trigger: 'blur' },
          {  max: 50, message: '项目名称不超过50个字符', trigger: ['blur', 'change'] },
          {  min: 2, message: '项目名称至少2个字符', trigger: ['blur', 'change'] }
        ],
        desc: [
          {  max: 200, message: '项目描述不超过200个字符', trigger: ['blur', 'change']  }
        ]
      },
      okText: '上传',
      cancelText: '',
      centerBtnText: '',
      formData: {
        name: app.activeProject.config.projectName,
        desc: app.activeProject.config.projectDescription,
      },
      treeData: [],
      selectedNodeId: '',
      loading: false,
      uploadPath: ''
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.visible = true;
    this.loadTreeData();
  },
  beforeCreate() {},
  beforeDestroy() {},
  methods: {
    loadTreeData(){
      this.$get(API.PLATFORM_SERVICE_PROJECT_TREE).then((res) => {
        treeForEach(res.data, (node, parent) => {
          node.expand = !parent;
          node.parent = parent;
          if (node.nodeType !== 'GROUP'){ 
            node.disabled = true;
          }
        });
        this.treeData = res.data;
      }).catch((err) => {
        console.log(err);
      });
    },
    handleOk(res) {
      if (!this.selectedNodeId) {
        this.$message.warn('请选择项目组');
        return;
      }; 
      this.creatProject();
    },
    handleClickCenter(){
  
    },
    handleCancel() {
      this.visible = false;
      this.$emit('close');
    },
    handleTreeSelect(nodeData, selected){
      this.selectedNodeId = nodeData.nodeId;
      nodeData.selected = true;
      treeForEach(this.treeData, (node, parent) => {
        if (node.nodeId === nodeData.nodeId){
          console.log('node', node.nodeName);
          this.uploadPath =  nodeData.nodeName;
          if (node.parent) this.getUploadPath(node);
        }
      });
    },
    getUploadPath(node){
      //// 路径
      if (node.parent) this.uploadPath =  node.parent.nodeName + ">" + this.uploadPath;
      if (!node.parent.parent) return; 
      this.getUploadPath(node.parent);
    },
    //// 上传 --新键
    creatProject() {
      this.loading = true;
      treeForEach(this.treeData, (node) => {
        node.disabled = true;
      });
      const blob = SysMLUtilHelper.saveProject(app.activeProject.config.id, SysMLUtilHelper.toArrayList(Array(app.activeProject.metadata.sysml.model.model)));
      let config = JSON.parse(JSON.stringify(app.activeProject.config));
      config.projectName = this.formData.name;
      config.projectDescription = this.formData.desc;
      let params = {
        nodeId: this.selectedNodeId,
        project: {
          config: config,
          model: blob,
          onlineConfig: app.activeProject.onlineConfig
        }
      };
      this.$post(API.PLATFORM_SERVICE_PROJECT_ADD, params)
        .then((res) => {
          this.$message.success('上传成功');
          this.visible = false;
          this.$emit('sure');

        }).finally(() => {
          this.loading = false;
        });
    }
  },
};
export default com;
export const publishRemoteProjectModal = new Portal(com, { single: true });
</script>
<style lang="scss" scoped>
.v-publish-new-project {
	._content {
		padding: 16px 83px;
    .upload-path{
      height: 22px;
      line-height: 22px;
      margin-bottom: 8px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
		.group-tree{
      height: 256px;
      overflow: auto;
      border-radius: 2px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      &._disabled{
        background: rgba(0, 0, 0, 0.04);
      }
    }
	}
}
</style>
